import React from "react";
import { Form, Input, InputNumber, Select, Button, Space } from "antd";
import TheUpload from "@/components/TheUpload";
import TheArea from "@/components/TheArea";
import TheDialog from "@/components/TheDialog";
import "./style/style.less";

class Settings extends React.Component {
  inputRef = React.createRef();
  state = {
    visible: false,
    mapData: null,
  };
  async componentDidMount() {
    const that = this;
    window.addEventListener("message", function (event) {
      if (event) {
        if (event.data.latlng) {
          event.data.latlng.lat = `${event.data.latlng.lat}`.substring(
            0,
            `${event.data.latlng.lat}`.indexOf(".") + 7
          );
          event.data.latlng.lng = `${event.data.latlng.lng}`.substring(
            0,
            `${event.data.latlng.lng}`.indexOf(".") + 7
          );
        }
        console.log(event.data);
        that.setState(
          {
            mapData: event.data,
          },
          () => {
            // this.formRef.setFieldsValue({address:})
          }
        );
      }
    });
  }

  getFileResult = (value) => {
    // if (value.length && value[0].response && value[0].response.code === 0) {
    //   const id = value[0].response.data[0].data;
    //   this.formRef.setFieldsValue({ productFilezId: id });
    // } else {
    //   this.formRef.setFieldsValue({ productFilezId: "" });
    // }
  };

  setAreaData = (data) => {
    const { provinceName, cityName, areaName } = data;
    this.formRef.setFieldsValue({ address: data });
    this.setState({
      provinceName,
      cityName,
      areaName,
    });
  };

  selectAddress = () => {
    this.setState({
      visible: true,
    });
  };

  handleCancel = () => {
    this.setState(
      {
        visible: false,
      },
      () => {
        const { mapData } = this.state;
        console.log(mapData);
        if (mapData) {
          this.formRef.setFieldsValue({
            address: mapData.poiname,
            lat: mapData.latlng.lat,
            lng: mapData.latlng.lng,
            addressDetails: mapData.poiaddress,
          });
          console.log(this.inputRef.current);
          this.inputRef.current.value = mapData.poiname;
          this.setState({ inputValue: mapData.poiname });
        }
      }
    );
  };

  render() {
    const { visible } = this.state;
    return (
      <div className="settings-box">
        <Form ref={(ref) => (this.formRef = ref)} labelCol={{ span: 2 }}>
          <div className="title">门店信息</div>
          <Form.Item label="门店名称">
            <Input placeholder="请输入门店名称" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item label="联系人">
            <Input placeholder="请输入联系人" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item label="联系电话">
            <InputNumber placeholder="请输入联系电话" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item label="服务标签">
            <Select
              placeholder="请选择服务标签"
              mode="multiple"
              allowClear
              style={{ width: 200 }}
            />
          </Form.Item>
          <Form.Item label="门店图片">
            <TheUpload getFileResult={this.getFileResult} maxSize={10} len={1} />
          </Form.Item>
          <Form.Item label="店铺环境">
            <TheUpload getFileResult={this.getFileResult} maxSize={10} len={4} />
          </Form.Item>
          <Form.Item label="店铺logo">
            <TheUpload getFileResult={this.getFileResult} maxSize={10} len={1} />
          </Form.Item>
          <div className="title">资质信息</div>
          <Form.Item label="门店所在地区">
            <TheArea
              ref={(ref) => (this.addressRef = ref)}
              setAreaData={this.setAreaData}
            />
          </Form.Item>
          <Form.Item name={"address"} label="门店地址">
            <Space>
              <input
                className="address-input"
                ref={this.inputRef}
                placeholder="请在地图上选点"
              />
              <Button onClick={this.selectAddress}>打开地图</Button>
            </Space>
          </Form.Item>
          <Form.Item name={"lng"} label="经度">
            <InputNumber placeholder="请输入经度" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name={"lat"} label="纬度">
            <InputNumber placeholder="请输入纬度" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name={"addressDetails"} label="详细地址(选填)">
            <Input placeholder="请输入详细地址" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item label="营业执照">
            <TheUpload getFileResult={this.getFileResult} maxSize={10} len={1} />
          </Form.Item>
          <div className="title">法人信息</div>
          <Form.Item labelCol={{ sapn: 3 }} label="法人身份证正面">
            <TheUpload getFileResult={this.getFileResult} maxSize={10} len={1} />
          </Form.Item>
          <Form.Item labelCol={{ sapn: 3 }} label="法人身份证背面">
            <TheUpload getFileResult={this.getFileResult} maxSize={10} len={1} />
          </Form.Item>
          <Form.Item labelCol={{ sapn: 3 }} label="收款账号(支付宝)">
            <Input placeholder="请输入收款账号" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Space>
                <Button>取消</Button>
                <Button type="primary">保存</Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
        <TheDialog
          title=""
          width={500}
          handleCancel={this.handleCancel}
          visible={visible}
          footer={null}
        >
          <iframe
            title="map"
            style={{
              width: 400,
              height: 700,
              border: "1px solid #fafafa",
              marginLeft: "20px",
            }}
            src={
              "https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=5GEBZ-RHECU-SWOVM-26CNG-EBL7E-YEFWM&referer=myapp"
            }
          />
        </TheDialog>
      </div>
    );
  }
}

export default Settings;
